<template>
  <div class="mobile-sale-list">
    <!-- 筛选表单 -->
    <div class="filter-form">
      <el-form size="small" label-width="80px">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="dataDates"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="width: 100%"
            :picker-options="pickerOptions"
            @change="changeDataTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchHandler" style="margin-right: 10px">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 销售数据列表 -->
    <div class="sale-list">
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>
      <div v-else-if="saleList.length === 0" class="empty-container">
        <empty v-if="saleList.length === 0"/>
      </div>
      <div v-else>
        <!-- 汇总卡片 -->
        <div class="summary-card">
          <div class="summary-title">汇总数据</div>
          <div class="summary-content">
            <div class="summary-item">
              <span class="label">订单数:</span>
              <span class="value">{{ summaryData.orderQty || 0 }}</span>
            </div>
            <div class="summary-item">
              <span class="label">销售商品数:</span>
              <span class="value">{{ summaryData.skuQty || 0 }}</span>
            </div>
            <div class="summary-item">
              <span class="label">销售额:</span>
              <span class="value">{{ formatCurrency(summaryData.salesAmount) }}</span>
            </div>
            <div class="summary-item">
              <span class="label">折扣:</span>
              <span class="value">{{ formatCurrency(summaryData.discountAmount) }}</span>
            </div>
            <div class="summary-item">
              <span class="label">运费:</span>
              <span class="value">{{ formatCurrency(summaryData.freightAmount) }}</span>
            </div>
            <div class="summary-item">
              <span class="label">税费:</span>
              <span class="value">{{ formatCurrency(summaryData.taxAmount) }}</span>
            </div>
            <div class="summary-item">
              <span class="label">总成交额:</span>
              <span class="value">{{ formatCurrency(summaryData.dealAmount) }}</span>
            </div>
          </div>
        </div>

        <!-- 销售数据列表 -->
        <div v-for="(item, index) in saleList" :key="index" class="sale-item">
          <div class="sale-header">
            <div class="sale-date">{{ formatRecordTime(item.recordTime, item.recordDate) }}</div>
          </div>
          <div class="sale-info">
            <div class="info-item">
              <span class="label">订单数:</span>
              <span class="value">{{ item.orderQty }}</span>
            </div>
            <div class="info-item">
              <span class="label">销售商品数:</span>
              <span class="value">{{ item.skuQty }}</span>
            </div>
            <div class="info-item">
              <span class="label">销售额:</span>
              <span class="value">{{ formatCurrency(item.salesAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">折扣:</span>
              <span class="value">{{ formatCurrency(item.discountAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">运费:</span>
              <span class="value">{{ formatCurrency(item.freightAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">税费:</span>
              <span class="value">{{ formatCurrency(item.taxAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">总成交额:</span>
              <span class="value">{{ formatCurrency(item.dealAmount) }}</span>
            </div>
            <div class="info-item">
              <span class="label">客单价:</span>
              <span class="value">{{ formatCurrency(item.customerUnitPrice) }}</span>
            </div>
            <div class="info-item">
              <span class="label">连带率:</span>
              <span class="value">{{ item.joinRate }}</span>
            </div>
          </div>
        </div>

        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.page"
            :page-sizes="[20, 30, 50]"
            :page-size="pageParams.pageSize"
            layout="total, prev, pager, next"
            :small="true"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSalePage } from '@/api/stat-core';
import { mapGetters } from 'vuex';
import { currency, utcFormat } from '@/utils/filters';

export default {
    name: 'MobileSaleList',
    props: {
        siteId: {
            type: [String, Number],
            required: true
        }
    },
    data () {
        return {
            loading: false,
            saleList: [],
            total: 0,
            dataDates: [],
            pickerOptions: {
                firstDayOfWeek: 1,
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 1);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setMonth(start.getMonth() - 3);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            summaryData: {
                orderQty: 0,
                skuQty: 0,
                salesAmount: 0,
                discountAmount: 0,
                freightAmount: 0,
                taxAmount: 0,
                dealAmount: 0
            },
            pageParams: {
                siteId: this.siteId,
                page: 1,
                pageSize: 20,
                startTime: '',
                endTime: ''
            }
        };
    },
    computed: {
        ...mapGetters([
            'timeZone',
            'siteList'
        ]),
        currencySymbol () {
            const info = this.siteList.find(res => res.id === Number(this.siteId));
            return info ? info.currencySymbol : '$';
        }
    },
    created () {
        this.initData();
        this.fetchData();
    },
    methods: {
        initData () {
            let now = new Date();
            let tempMonth = (100 + now.getMonth() + 1).toString().substring(1);
            let tempDay = (100 + now.getDate()).toString().substring(1);
            let tempDate = now.getFullYear() + '-' + tempMonth + '-' + tempDay;
            this.dataDates = [tempDate, tempDate];
            this.pageParams.startTime = new Date(tempDate.replace(/-/g, '/') + ' 00:00:00 UTC' + this.timeZone).getTime();
            this.pageParams.endTime = new Date(tempDate.replace(/-/g, '/') + ' 23:59:59 UTC' + this.timeZone).getTime();
        },
        fetchData () {
            this.loading = true;

            getSalePage(this.pageParams).then(res => {
                this.saleList = res.records || [];
                this.total = res.totalElements || 0;
                this.calculateSummary();
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            });
        },
        calculateSummary () {
            // 重置汇总数据
            this.summaryData = {
                orderQty: 0,
                skuQty: 0,
                salesAmount: 0,
                discountAmount: 0,
                freightAmount: 0,
                taxAmount: 0,
                dealAmount: 0
            };

            // 计算汇总数据
            this.saleList.forEach(item => {
                this.summaryData.orderQty += Number(item.orderQty) || 0;
                this.summaryData.skuQty += Number(item.skuQty) || 0;
                this.summaryData.salesAmount += Number(item.salesAmount) || 0;
                this.summaryData.discountAmount += Number(item.discountAmount) || 0;
                this.summaryData.freightAmount += Number(item.freightAmount) || 0;
                this.summaryData.taxAmount += Number(item.taxAmount) || 0;
                this.summaryData.dealAmount += Number(item.dealAmount) || 0;
            });
        },
        changeDataTime () {
            if (!this.dataDates || this.dataDates.length <= 0) {
                this.initData();
            } else {
                this.pageParams.startTime = new Date(this.dataDates[0].replace(/-/g, '/') + ' 00:00:00 UTC' + this.timeZone).getTime();
                this.pageParams.endTime = new Date(this.dataDates[1].replace(/-/g, '/') + ' 23:59:59 UTC' + this.timeZone).getTime();
            }
        },
        searchHandler () {
            this.pageParams.page = 1;
            this.fetchData();
        },
        resetForm () {
            this.initData();
            this.pageParams.page = 1;
            this.pageParams.pageSize = 10;
            this.fetchData();
        },
        handleSizeChange (val) {
            this.pageParams.pageSize = val;
            this.fetchData();
        },
        handleCurrentChange (val) {
            this.pageParams.page = val;
            this.fetchData();
        },
        formatCurrency (amount) {
            return currency(amount, this.currencySymbol);
        },
        formatRecordTime (recordTime, recordDate) {
            if (recordDate) {
                return recordDate;
            } else {
                return utcFormat(recordTime, 'YYYY-MM-DD HH:00:00', this.timeZone);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.mobile-sale-list {
  padding: 10px 0;

  .filter-form {
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .sale-list {
    .loading-container, .empty-container {
      padding: 20px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .summary-card {
      background-color: #f0f9ff;
      border-radius: 4px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .summary-title {
        font-weight: bold;
        font-size: 16px;
        color: #409EFF;
        margin-bottom: 10px;
        border-bottom: 1px solid #d9ecff;
        padding-bottom: 8px;
      }

      .summary-content {
        .summary-item {
          display: flex;
          margin-bottom: 8px;

          .label {
            width: 100px;
            color: #606266;
            font-weight: bold;
          }

          .value {
            flex: 1;
            color: #303133;
            font-weight: bold;
          }
        }
      }
    }

    .sale-item {
      background-color: #fff;
      border-radius: 4px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .sale-header {
        padding-bottom: 10px;
        border-bottom: 1px solid #ebeef5;

        .sale-date {
          font-weight: bold;
          color: #409EFF;
          font-size: 16px;
        }
      }

      .sale-info {
        padding: 10px 0;

        .info-item {
          display: flex;
          margin-bottom: 8px;

          .label {
            width: 100px;
            color: #606266;
          }

          .value {
            flex: 1;
            color: #303133;
          }
        }
      }
    }

    .pagination-container {
      text-align: center;
      margin-top: 20px;
      padding: 15px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
}

@media screen and (max-width: 768px) {
  .mobile-sale-list {
    .pagination-container {
      .el-pagination {
        white-space: normal;

        .el-pagination__sizes {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>

<style>
/* 全局样式，修复移动端日期选择器显示问题 */
.el-picker-panel {
  width: 90% !important;
  left: 5% !important;
}

.el-date-table {
  width: 100%;
}

.el-date-range-picker__content {
  width: 50% !important;
  box-sizing: border-box;
}

.el-date-range-picker__header {
  padding: 8px 5px !important;
}

.el-date-range-picker__header div {
  margin-right: 5px !important;
  margin-left: 5px !important;
}

.el-picker-panel__shortcut {
  padding: 0 10px !important;
  line-height: 28px !important;
}

@media screen and (max-width: 768px) {
  .el-date-editor .el-range-separator {
    padding: 0 3px;
  }

  .el-date-editor .el-range-input {
    width: 42%;
  }

  .el-date-range-picker {
    width: 90% !important;
  }

  .el-picker-panel__sidebar {
    width: 110px !important;
  }

  .el-date-range-picker__content.is-left {
    border-right: 1px solid #e4e4e4;
  }
}
</style>
